/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
import './js/Global';

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

import JzAdView from './js/JzAdView';
import JzAdView2 from './js/JzAdView2';

export default class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      // Note: 目前只支持有一个为 true
      // showJzAdView: true, // 显示开屏广告容器
      // showJzAdView2: false, // 显示信息流广告容器
      showJzAdView: false, // 显示开屏广告容器
      showJzAdView2: true, // 显示信息流广告容器
    };

    this.jzAdView = null;
    this.jzAdView2 = null;
}

  componentDidMount() {

  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={() => {
          if (this.jzAdView) {
            showToast('加载开屏广告');
            this.jzAdView.requestAd();
          }
        }}>{'开屏广告 ' + this.state.showJzAdView}</Text>
        <Text style={[styles.welcome, { marginTop: 0 }]} onPress={() => {
          if (this.jzAdView2) {
            showToast('加载信息流广告');
            this.jzAdView2.requestAd();
          }
        }}>{'信息流（自渲染）广告 ' + this.state.showJzAdView2}</Text>
        {
          this.state.showJzAdView && 
          <JzAdView 
            ref={ref => this.jzAdView = ref }
            style={{
              flex: 1,
              width: SCREEN_WIDTH, 
              backgroundColor: 'red' 
            }} />
        }
        {
          this.state.showJzAdView2 &&
          <JzAdView2 
            ref={ref => this.jzAdView2 = ref }
            style={{
              width: SCREEN_WIDTH,
              height: 120, 
              backgroundColor: 'red' 
            }} />
        }
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    margin: 10,
    fontSize: 20,
    textAlign: 'center',
  }
});
